<template>
  <view class="book">
    <view class="title">
      <uni-icons type="staff-filled" size="13"></uni-icons>
      以下是预览版，纸质完整版请联系管理员免费领取
    </view>
    <view v-for="item in bookList" :key="item.id" class="card">
      <image :src="item.cover" class="picture"></image>
      <view class="card_content">
        <text class="content">{{ item.name }}</text>
        <rich-text :nodes="item.remark_short" class="uni-h6 content"></rich-text>
        <text class="content">{{ item.author }}</text>
        <text class="content">{{ item.publish_date }}</text>
        <button @tap="onClickGetBook(item)" size="mini" type="primary">查看</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { HandpickedBookItem } from '@/types/home'
import { getHandpickedBookAPI } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import UniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import { downloadFile, download, baseURL, baseURL_noapi } from '@/utils/http'
// 页面初始化加载教辅
onLoad(() => {
  getAllBook()
})
const bookList = ref<HandpickedBookItem[]>([])
const getAllBook = async () => {
  const res = await getHandpickedBookAPI()
  console.log('所有教辅书：', res)
  if (Array.isArray(res.results) && res.results.length > 0) {
    bookList.value = res.results
    bookList.value = fillRemarkShort(bookList.value)
  } else {
    uni.showToast({ icon: 'error', title: '教辅获取失败' })
  }
}
// 从remark中抽取前15个字符串，给remark_short
const fillRemarkShort = (bookList: HandpickedBookItem[]) => {
  for (let i = 0; i < bookList.length; i++) {
    if (bookList[i].remark !== '') {
      bookList[i].remark_short = bookList[i].remark.slice(0, 25) + '……'
    }
    if (bookList[i].publish_date !== '') {
      bookList[i].publish_date = bookList[i].publish_date.slice(0, 10)
    }
    if (bookList[i].cover !== '') {
      bookList[i].cover = baseURL_noapi + '/static/uploads/' + bookList[i].cover
    }
    if (bookList[i].file !== '') {
      bookList[i].file = baseURL_noapi + '/static/uploads/' + bookList[i].file
    }
    if (bookList[i].author !== '') {
      bookList[i].author = '主编:' + bookList[i].author.slice(0, 1) + '老师'
    }
  }
  return bookList
}
const onClickGetBook = (item: HandpickedBookItem) => {
  console.log('文件路径', item)
  uni.navigateTo({
    url: "/pages/handpicked/detail?name=" + encodeURIComponent(item.name) + "&remark=" + encodeURIComponent(item.remark) +
      "&file=" + encodeURIComponent(item.file) + "&publish_date=" + encodeURIComponent(item.publish_date)
  })
}
</script>

<style lang="scss" scoped>
.book {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;

  .title {
    font-size: 27rpx;
    color: green;
  }
}

.content {
  font-size: 32rpx;
}

.card {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: centert;
  padding: 3rpx;
  margin: 10rpx;
  background-color: rgba(250, 250, 250, 0.99);
  border-radius: 15rpx;
  border-style: solid;
  border-color: rgba(236, 233, 236, 0.962);
}

.card_item {
  display: flex;
  flex-flow: row nowrap;

  margin: 2rpx;
}

.card_content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: flex-start;
  margin: 10rpx;
}

.button_content {
  font-size: 26rpx;
}

.picture {
  width: 180rpx;
  height: 170rpx;
  margin: 10rpx;
}
</style>
